<template>
  <div class="temp-page-container">
    <header class="temp-page-header">
      <Header></Header>
    </header>
    <main class="temp-page-container-main">
      <section class="temp-page-container-left">
        <slot name="main-left"></slot>
      </section>
      <aside class="temp-page-container-right">
        <aside class="bloghome-container-right">
          <!-- 登录注册模块插槽 -->
          <slot name="aside"></slot>
          <!-- 简介模块 -->
          <Aside class="info">
            <template #header>
              <div class="aside-header aside-fs">博客介绍</div>
              <ul>
                <li>
                  <p>博客因兴趣诞生,在不断完善中。</p>
                </li>
                <li>
                  <p>本博客相当于一个技术论坛。</p>
                </li>
                <li>
                  <p>用户登录后可以发表博文。</p>
                </li>
              </ul>
            </template>
            <template #main>
              <div class="aside-main aside-fs">
                <span class="aside-main-item">
                  <a href="#">
                    <div class="aside-item-fs">文章</div>
                    <div class="aside-item-number">{{ articlesCount }}</div>
                  </a>
                </span>
                <span class="aside-main-item">
                  <a href="#">
                    <div class="aside-item-fs">分类</div>
                    <div class="aside-item-number">{{ tagsCount }}</div>
                  </a>
                </span>
              </div>
            </template>
            <template #footer> </template>
          </Aside>
          <!-- 公告模块 -->
          <Aside class="notice">
            <template #header>
              <div class="aside-header aside-fs">简介</div>
            </template>
            <template #main>
              <div class="">欢迎参观┗|｀O′|┛ 嗷~~</div>
            </template>
          </Aside>
                  <!-- 活跃用户模块 -->
        <FriendsAside class="friends"></FriendsAside>
        </aside>
      </aside>
    </main>
    <footer class="temp-page-footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Aside from '@/components/Aside'
import FriendsAside from '@/components/Asides/FriendsAside'

export default {
  name: 'TempPage',
  data () {
    return {
      articlesCount: 1,
      tagsCount: 1
    }
  },
  methods: {
    async getAllArticles () {
      const res = await this.$api.initArticles()
      // console.log(res)
      this.articleData = res.data.data
      this.articlesCount = res.data.count
    },
    async getAllTag () {
      // var tagsId = '620e68060b9c57ca141d8933'
      // tagsId = parseInt(tagsId)
      // console.log(tagsId)
      const res = await this.$api.getAllTags()
      this.tagsCount = res.data.data.tags.length
      // console.log(res)
    }
  },
  created () {
    this.getAllArticles()
    this.getAllTag()
  },
  components: {
    Header,
    Aside,
    FriendsAside
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  // height: 100%;
}
.temp-page-container {
  width: 100%;
  // height: 100%;
  background-image: -moz-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: -webkit-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
}
.temp-page-container-main {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  // min-height: 500px;
  margin: 0 auto;
}
.temp-page-container-left {
  width: 75%;
  margin-right: 15px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  // padding: 50px 40px;
}
.temp-page-container-right {
  width: 25%;
}
.aside-header {
  display: block;
}
.aside-main {
  display: flex;
  margin: 0.7rem 0 0.2rem;
  width: 100%;
  justify-content: center;
}
.aside-main-item {
  flex: 1;
  text-align: center;
  margin: 0 3px;
  white-space: nowrap;
}
.aside-item-fs {
  font-size: 16px;
  color: black;
}
.aside-item-number {
  font-size: 17px;
  color: black;
  font-weight: 700;
}
.aside-fs {
  font-size: 18px;
}
.aside-footer {
  display: block;
  margin-top: 0.7rem;
  background-color: rgb(72, 72, 255);
  color: #fff;
  text-align: center;
  line-height: 2.4;
}
.info,
.notice,
.friends {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 15px;
}
.info{
  padding: 20px 15px;
  align-items: center;
}
.notice {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0.5rem;
}

.friends{
  padding: 20px 15px;
}
</style>
